<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="/_ah/channel/jsapi"></script>
        <script type="text/javascript">
            channel = new goog.appengine.Channel('{{ token }}');

            onOpened = function()
                {
                }

            onMessage = function(message)
                {
                    $("#output").html(message.data);
                }

            onError = function(error)
                {
                    alert('Error: ' + error);
                }

            onClose = function()
                {
                }

            $("#closeButton").click(function (eventObject)
                {
                    channel.close();
                });

            $(document).ready( function()
                {
                    socket = channel.open();
                    socket.onopen = onOpened;
                    socket.onmessage = onMessage;
                    socket.onerror = onError;
                    socket.onclose = onClose;
                });
        </script>
    </head>
    <body>
        <div id="output">
            Output goes here.
        </div>

        <input type="button" id="closeButton" value="Close Channel" />
    </body>
</html>
